<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head lang="en">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<link href="../../css/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/api.js"></script>
	<script type="text/javascript" src="../../js/axios.js"></script>
	<script type="text/javascript" src="../../js/commons/messageInfo.js"></script>
	<script type="text/javascript" src="../../js/system/position/positionGrant.js"></script>

	<script src="../../js/commons/react.js"></script>
	<script src="../../js/commons/reactDom.js"></script>
	<script src="../../js/commons/babel.js"></script>
	<script src="../../js/commons/antd.js"></script>
	<link href="../../css/antd.css" rel="stylesheet">
	</link>

	<style type="text/css">
		#treeMenu ul {
			margin-left: 50px;
		}

		#treeMenu a {
			font-size: 14px;
		}

		.hidden {
			display: none;
		}
	</style>
</head>

<body>
	<div class="place"> <span>位置：</span>
		<ul class="placeul">
			<li><a href="../users/userList.html">系统管理</a></li>
			<li><a href="positionList.html">职位管理</a></li>
			<li><a href="#">赋权</a></li>
		</ul>
	</div>
	<div class="formbody">
		<div class="formtitle"><span>职位赋权</span></div>
		<ul id="treeMenu" class="forminfo">

		</ul>

		<input type="button" id="save" class="btn" value="确认赋权" />
		<input type="button" class="btn" value="返回" onclick="window.history.go(-1);" />
	</div>

	<script type="text/babel">
		let id = location.href.split('?')[1].split('=')[1]
		appendMsgBox()
		let initKey = null
		const Tree = () => {
			const fieldNames = { key: 'id', title: 'rname', children: 'list' }
			const [data, setData] = React.useState([])
			const [checked, setChecked] = React.useState([])

			document.getElementById('save').onclick = () => {
				axiosRequest1('post','/job/endowGrant/'+id,{initKey,checked}).then((result) => {
					const {code,message,data}=result.data
					showMessage(message,4000)
				}).catch((err) => {
					console.log(err);
				});
			}

			React.useEffect(() => {

				axiosRequest1('get', '/job/modules').then((res) => {
					const { code, message, data } = res.data
					if (code === 200) {
						setData(data)
						getGrant(setChecked)
					} else showMessage(message, 2000)
				}).catch((err) => {
					console.log(err);
				});
			}, [])

			const check = (key) => {
				setChecked(key)
			}

			return (
				<antd.Tree
					checkable
					onCheck={key => check(key)}
					fieldNames={fieldNames}
					checkedKeys={checked}
					treeData={data} />
			)
		}

		ReactDOM.createRoot(document.querySelector('#treeMenu')).render(<Tree />)
	</script>

</body>

</html>